<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<!DOCTYPE html>
<html>
<head>
    <title>航班详情 - ${flight.flightId}</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        body {
            background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8)),
                        url(img/login_background.png);
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            min-height: 100vh;
        }

        /* 调整原有卡片样式 */
        .detail-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            box-shadow: 0 4px 30px rgba(0,0,0,0.1);
            overflow: hidden;
            margin-top: 2rem;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        /* 微调头部样式 */
        .flight-header {
            background: rgba(41, 98, 255, 0.95);
            backdrop-filter: blur(5px);
        }

        /* 增强输入框可见性 */
        .form-control-edit {
            background: rgba(255, 255, 255, 0.9);
        }
        .detail-card {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 15px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            overflow: hidden;
        }
        .flight-header {
            background: #2962ff;
            padding: 2rem;
            color: white;
            position: relative;
        }
        .flight-header:after {
            content: "";
            position: absolute;
            bottom: -20px;
            left: 0;
            right: 0;
            height: 40px;
            background: inherit;
            transform: skewY(-3deg);
        }
        .info-label {
            color: #6c757d;
            font-weight: 500;
            margin-bottom: 0.5rem;
        }
        .form-control-edit {
            border: 2px solid #dee2e6;
            border-radius: 8px;
            padding: 0.75rem 1.25rem;
            transition: all 0.3s;
        }
        .form-control-edit:focus {
            border-color: #2962ff;
            box-shadow: 0 0 0 3px rgba(41,98,255,0.1);
        }
        .time-input-group {
            position: relative;
        }
        .time-input-group i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #6c757d;
            z-index: 2;
        }
        .btn-save {
            background: linear-gradient(135deg, #2962ff, #1565c0);
            color: white;
            padding: 1rem 2rem;
            border-radius: 10px;
            border: none;
            font-weight: 600;
            letter-spacing: 0.5px;
            transition: all 0.3s;
        }
        .btn-save:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(41,98,255,0.3);
        }
    </style>
</head>
<body class="bg-light">
<div class="container py-5">
    <div class="detail-card">
        <!-- 头部 -->
        <div class="flight-header text-center">
            <h1 class="mb-3">
                <i class="fa fa-plane-departure mr-3"></i>
                ${flight.flightId}
            </h1>
            <h4>航班详细信息管理</h4>
        </div>

        <!-- 表单主体 -->
        <form action="UpdateFlightServlet" method="post" class="p-4" onsubmit="return confirm('确认更新航班信息吗？')">
            <input type="hidden" name="flightId" value="${flight.flightId}">

            <div class="row">
                <!-- 左侧信息 -->
                <div class="col-md-6">
                    <!-- 机型 -->
                    <div class="form-group mb-4">
                        <label class="info-label">
                            <i class="fa fa-cogs mr-2"></i>
                            机型编号
                        </label>
                        <input type="text" class="form-control form-control-edit" 
                               name="aircraftId" value="${flight.aircraftId}" required>
                    </div>

                    <!-- 起飞机场 -->
                    <div class="form-group mb-4">
                        <label class="info-label">
                            <i class="fa fa-map-marker-alt mr-2 text-danger"></i>
                            起飞机场
                        </label>
                        <input type="text" class="form-control form-control-edit" 
                               name="origin" value="${flight.origin}" required>
                    </div>

                    <!-- 到达机场 -->
                    <div class="form-group mb-4">
                        <label class="info-label">
                            <i class="fa fa-map-marker-alt mr-2 text-success"></i>
                            到达机场
                        </label>
                        <input type="text" class="form-control form-control-edit" 
                               name="destination" value="${flight.destination}" required>
                    </div>
                </div>

                <!-- 右侧信息 -->
                <div class="col-md-6">
                    <!-- 起飞时间 -->
                    <div class="form-group mb-4">
                        <label class="info-label">
                            <i class="fa fa-clock mr-2"></i>
                            起飞时间
                        </label>
                        <div class="time-input-group">
                            <i class="fa fa-calendar-alt"></i>
                            <input type="datetime-local" 
                                   class="form-control form-control-edit pl-5" 
                                   name="departureTime" 
                                   value="${flight.departureTime}" 
                                   required>
                        </div>
                    </div>

                    <!-- 到达时间 -->
                    <div class="form-group mb-4">
                        <label class="info-label">
                            <i class="fa fa-clock mr-2"></i>
                            到达时间
                        </label>
                        <div class="time-input-group">
                            <i class="fa fa-calendar-alt"></i>
                            <input type="datetime-local" 
                                   class="form-control form-control-edit pl-5" 
                                   name="arrivalTime" 
                                   value="${flight.arrivalTime}" 
                                   required>
                        </div>
                    </div>

                    <!-- 基础票价 -->
                    <div class="form-group mb-4">
                        <label class="info-label">
                            <i class="fa fa-yen-sign mr-2"></i>
                            基础票价
                        </label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text">¥</span>
                            </div>
                            <input type="number" 
                                   class="form-control form-control-edit" 
                                   name="price" 
                                   value="${flight.price}" 
                                   step="0.01" 
                                   min="0" 
                                   required>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 操作按钮 -->
            <div class="text-center py-4">
                <button type="submit" class="btn-save">
                    <input type="hidden" name="flightId" value= "${flight.flightId}">
                    <i class="fa fa-save mr-2"></i>
                    保存修改
                </button>
            </div>
        </form>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>